<script setup>
  import { useRouter, useRoute } from 'vue-router'
  import { LeftCircleFilled } from '@ant-design/icons-vue'
  const router = useRouter()
  const route = useRoute()
  const back = () => router.back()
  const goHome = () => router.push('/')
</script>

<template>
  <a-page-header @back="back" >
    <template #subTitle>
      <a-breadcrumb>
        <a-breadcrumb-item @click="goHome" class="go-home"> 首页 </a-breadcrumb-item>
        <a-breadcrumb-item> {{ route.meta?.title }} </a-breadcrumb-item>
      </a-breadcrumb>
    </template>
    <template #extra> <slot></slot> </template>
  </a-page-header>
</template>

<style lang="scss" scoped>
  .ant-page-header {
    padding: 0;
    position: fixed;
    left: 50%;
    top: 90px;
    z-index: 99;
    width: 100%;
    max-width: 1300px;
    transform: translateX(-50%);
    background-color: #fff;
    :deep(.ant-page-header-back-button:hover) {
      color: var(--primary);
    }
    .go-home {
      cursor: pointer;
      &:hover {
        color: var(--primary);
      }
    }
  }
  @media (max-width: 1300px) {
    .ant-page-header {
      padding: 0 12px;
    }
  }
  @media (max-width: 750px) {
    .ant-page-header {
      top: 44px;
    }
  }
</style>